<!DOCTYPE HTML>  
<html>  
<head>
<title>H5STREAM VIDEO</title>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/adapter.js"></script>
<script src="js/platform.js"></script>
<script src="js/h5splayer.js"></script>
<script src="js/h5splayerhelper.js"></script>

<link rel = "stylesheet" type = "text/css" href = "css/h5splayer.css" />

</head>

<body> 

<div class="h5videodiv">
    <video class="h5video" id="h5sVideo1" muted autoplay webkit-playsinline playsinline style="width: 490px;height: 276px;">

    </video>
    <!-- <div class="playpause" id="playpause1" ></div> -->
</div>

<div class="h5videodiv">
    <video class="h5video" id="h5sVideo2" muted autoplay webkit-playsinline playsinline style="width: 490px;height: 276px;">

    </video>
    <!-- <div class="playpause" id="playpause2" ></div> -->
</div>

<div class="h5videodiv">
    <video class="h5video" id="h5sVideo3" muted autoplay webkit-playsinline playsinline style="width: 490px;height: 276px;">

    </video>
</div>

<!-- <div class="h5videodiv">
    <video class="h5video" id="h5sVideo4" muted autoplay webkit-playsinline playsinline>

    </video>
</div> -->
</body>

<script>

if (H5siOS() === true
	|| H5sSafariBrowser() === true)
{
	$('#h5sVideo1').prop("controls", true);
	$('#h5sVideo2').prop("controls", true);
	$('#h5sVideo3').prop("controls", true);
	$('#h5sVideo4').prop("controls", true);
}

$.ajax({
	url: 'http://localhost:8080/api/v1/AddSrcRTSP',
	data: {
		session: 'c1782caf-b670-42d8-ba90-2244d0b0ee83',
		token: 'token0',
		name: 'Stream 0',
		user: 'admin',
		password: 'hnu12yun',
		url: 'rtsp://admin:hnu12yun@192.168.101.51:554'
	},
	success: (e) => {
		console.log(e)
		var conf3 = {
			videoid:'h5sVideo3',
			protocol: 'http:', //'http:' or 'https:'
			host: 'localhost:8080', //'localhost:8080'
			rootpath:'/', // '/' or window.location.pathname
			token:'token0',
			hlsver:'v1', //v1 is for ts, v2 is for fmp4
			session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
		};
		var v3 = new H5sPlayerRTC(conf3); // H5sPlayerRTC H5sPlayerCreate
		v3.connect()
	}
})

var conf1 = {
	videoid:'h5sVideo1',
	protocol: 'http:', //'http:' or 'https:' window.location.protocol
	host: 'localhost:8080', //'localhost:8080' window.location.host
	rootpath:'/', // '/' or window.location.pathname
	token:'token2',
	hlsver:'v1', //v1 is for ts, v2 is for fmp4
	session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
};

var conf2 = {
	videoid:'h5sVideo2',
	//videodom: h5svideodom2,
	protocol: 'http:', //'http:' or 'https:'
	host: 'localhost:8080', //'localhost:8080'
	rootpath:'/', // '/' or window.location.pathname
	token:'token1',
	hlsver:'v1', //v1 is for ts, v2 is for fmp4
	session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
};

// var conf3 = {
// 	videoid:'h5sVideo3',
// 	//videodom: h5svideodom2,
// 	protocol: 'http:', //'http:' or 'https:'
// 	host: 'localhost:8080', //'localhost:8080'
// 	rootpath:'/', // '/' or window.location.pathname
// 	token:'token3',
// 	hlsver:'v1', //v1 is for ts, v2 is for fmp4
// 	session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
// };

// var conf3 = {
// 	videoid:'h5sVideo3',
// 	//videodom: h5svideodom3,
// 	protocol: 'http:', //'http:' or 'https:'
// 	host: 'localhost:8080', //'localhost:8080'
// 	rootpath:'/', // '/' or window.location.pathname
// 	token:'token3',
// 	hlsver:'v1', //v1 is for ts, v2 is for fmp4
// 	session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
// };


// var v1 = H5sPlayerCreate(conf1);
// var v1 = new H5sPlayerRTC(conf1);
// var v2 = new H5sPlayerRTC(conf2);
// var v3 = new H5sPlayerRTC(conf3);


// v1.connect()
// v2.connect()
// v3.connect()


</script>

</html> 